import { View } from "@tarojs/components";
import { getStrategyMonitorApi } from "@/api";
import { useState } from "react";
import Title from "@/components/Title";
import { useLoad } from "@tarojs/taro";
import MobileTable from "@yrobot/react-mobile-table";
import "@yrobot/react-mobile-table/lib/index.css";

interface StrategyType {
  Strategy: string;
  ProfitRate: string;
  StrategyCount: string;
  MaxDrawdown: string;
}

export default () => {
  const [data, setData] = useState<Array<Array<string | number>>>();
  function getData() {
    getStrategyMonitorApi().then(
      (res: { rows: Array<StrategyType>; total: string | number }) => {
        console.log(res.rows);
        const list = res.rows.map((row) => [
          row.Strategy,
          row.ProfitRate,
          row.StrategyCount,
          parseFloat(row.MaxDrawdown).toFixed(3),
        ]);
        list.unshift(["策略名称", "策略收益", "单数", "金额"]);
        setData(list);
      }
    );
  }
  useLoad(() => getData());
  return (
    <View className="bg-[#F6F6F6] p-3">
      <Title title="策略检测" />
      <View className="mt-12">
        <MobileTable
          data={data} // 数据源:[[]]
          columnMinWidth={60} // 每一列的最小宽度, 假设屏宽为375, 默认值60: Int
        />
        ;
      </View>
    </View>
  );
};
